<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function checkName(){
            // //向服务器发送ajax请求，第一参数为访问服务器的URL路径
            // //第二参数为发送请求的信息
            // axios.get("/user/checkName",{
            //     params:{ //向服务器发送的表单数据
            //         name:$("userName").value
            //     }
            // }).then(resp =>{//处理响应信息
            //     //得到响应信息消息体内容
            //     var info = resp.data;
            //     if(info == "ok"){
            //         $("nameSpan").innerHTML = "可以使用";
            //         $("nameSpan").style.color = "green";
            //     }
            //     else{
            //         $("nameSpan").innerHTML = "该用户已存在";
            //         $("nameSpan").style.color = "red";
            //     }
            // })

            //构建表单数据
            let paramObj = new URLSearchParams();
            paramObj.append("name",$("userName").value);

            axios.post("/user/checkName",paramObj).then(resp =>{
                var info = resp.data;
                if(info == "ok"){
                      $("nameSpan").innerHTML = "可以使用";
                      $("nameSpan").style.color = "green";
                }
                else{
                      $("nameSpan").innerHTML = "该用户已存在";
                      $("nameSpan").style.color = "red";
                }
            })
        }

        function find(){
            axios.get("/user/find").then(resp =>{
                alert(resp.data);
            })
        }

        async function findNum(){
            var num = 1;
            await axios.get("/user/getNum").then(resp =>{
                num = resp.data;
            });
            alert(num);
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="userName" onblur="checkName()">
      <span id="nameSpan"></span>

    <form action="/user/checkName">
        用户名：<input type="text" name="name"><br>
        <input type="submit" value="提交">
    </form>

    <input type="button" value="ajax请求" onclick="find()"><br>
    <input type="button" value="findNum" onclick="findNum()">
    <br>
</body>
</html>